/**
 * 课程目录
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    FlatList,
    TouchableWithoutFeedback,
    Dimensions,
    Platform
} from 'react-native'
import CheckBox from '../utils/react-native-check-box';
const { width } = Dimensions.get('window');
import {setSpText,setHW} from './ScreenUtil'
// 家长进来 默认有高亮的是：学生希望买的
export default class CoursePeriods extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggle:false,
            CoursePeriodsList:{},
            LISTCOURSEPART: this.props.dataList&&this.props.dataList.LISTCOURSEPART
        }
    }
    render() {
        return (
            <View style={styles.listBox}>
                <View style={{ paddingBottom: 50 }}>
                    <FlatList
                        data={this.state.LISTCOURSEPART}
                        showsVerticalScrollIndicator={false}
                        renderItem={({ item }) => this.renderItem(item)}
                        keyExtractor={(item) => item.ID}
                        extraData={this.state}
                    />
                </View>
                
            </View>
        );
    }
   
    componentWillReceiveProps(props) {
        this.setState({
            CoursePeriodsList:props.CoursePeriodsList,
            LISTCOURSEPART: props.CoursePeriodsList.LISTCOURSEPART
        });
    }
   
    renderItem(item) {
        return (
            <View style={styles.curriculumItem}>
                {!this.props.periodsBorder ? <View style={styles.checkWrapper}>{this.renderCheckBox(item)}</View> : null}
                <TouchableWithoutFeedback onPress={() => this.goToPeriods(item)}>
                    <View style={[styles.culumItems]} >
                        <View style={styles.curriculumTitleWrapper}>
                            <View style={styles.titleBuyingBox}>
                                <View style={styles.lineBorder}></View>
                                {this.buying(item)}
                                {this.courseName(item)}
                            </View>
                            {this.FreeOrCharge(item)}
                        </View>
                        <View style={styles.imgBox}>
                            {this.showPic(item.FILETYPES)}
                        </View>
                        <View style={styles.curriculumInfo}>
                            <View style={styles.flexCenter}>
                                <View style={styles.circleBorder}></View>
                            <Text style={styles.curCommonText}>知识点:</Text>
                            </View>
                            <View style={styles.knowageTextWrapper}>
                                {
                                    item.LISTTAG.map((tag, i) => {
                                        return (
                                            <View key={i} style={styles.knowageItemRadius}>
                                                <Text style={styles.knowageItem}>{tag.TAG_NAME}</Text>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                        <View style={styles.curriculumInfo}>
                            <View style={styles.flexCenter}>
                                <View style={styles.circleBorder}></View>
                                <Text style={styles.curCommonText}>简介:</Text>
                            </View>
                            {this.introFun(item,40)}
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
    buying(item){
        if(item.IS_FREE=='0'&&item.ISBUY=='0'&&item.ISENROLL=='1'){//收费&&没有购买  && 再根据报名中否状态显示购买中提示
            return(
                <Text style={styles.buying}>(家长购买中)</Text>
            )
        }else{
            return (
                <Text style={styles.buying}></Text>
            )
        }
    }
    // 简介
    introFun(item,MaxNum){
        let text=item.INTRODUCE;//简介
        text = text.replace(/\r\n/g,"")
        text = text.replace(/\n/g,"");
        //替换所有的空格（中文空格、英文空格都会被替换）
        text = text.replace(/\s/g,"");
        if(text){
            if(text.length>MaxNum){//超出字体 有展开收起
                return(
                    <View>
                        {item.introIsOpen?
                        <Text style={[styles.curContent,{paddingBottom:5}]}>
                            {text}
                        </Text>
                        : <Text style={[styles.curContent,{paddingBottom:5}]}>
                            {text.substring(0,MaxNum)+'...'}
                        </Text>
                        }
                        <View>
                            <View style={styles.openBoxText}>
                                <View style={styles.openBox}>
                                    <TouchableWithoutFeedback  onPress={()=>this.openToggle(item,item.introIsOpen)}>
                                        <View style={styles.openBox}>
                                            <Text style={styles.openText}> {item.introIsOpen?'收起':'展开'}</Text>
                                            <Image style={styles.openImg} source={require('../assets/imgs/open.png')}/>
                                        </View>
                                    </TouchableWithoutFeedback>
                                </View>
                            </View>
                        </View>
                    </View>
                )
            }else{
                return(
                    <Text style={[styles.curContent,{paddingBottom:10}]}>{text}</Text>
                )
            }
        }else{
            return(
                <Text style={[styles.curContent,{paddingBottom:10}]}>暂无简介</Text>
            )
        }
    }
    openToggle(item,isOpen){
        this.setState({
            isToggle:!this.state.isToggle//切换状态
        });
        item.introIsOpen=isOpen==true?false:true;
    }

    // 显示课时名称，最多10个字符，多出字符使用省略号表示
    courseName(item){
        let maxLen=10;
        if(item.IS_FREE=='0'&&item.ISBUY=='0'&&item.ISENROLL=='1'){//收费&&没有购买  && 再根据报名中否状态显示购买中提示
            maxLen=7-item.NUMBER.length;
        }
        if(item.TITLE.length>maxLen){
            return(
                <Text style={styles.curriculumTitle}>第{item.NUMBER}课时 {item.TITLE.substring(0,maxLen)+'...'}</Text>
            )
        }else{
            return(
                <Text style={styles.curriculumTitle}>第{item.NUMBER}课时 {item.TITLE}</Text>
            )
        }
    }
    // 列表的单个勾选状态
    // ISBUY    0 没有购买，显示价钱，1 已经购买，显示去学习的按钮
    // IS_FREE  0 是收费 1 是免费
    // ISENROLL 0 未报名 1 已报名 课程和课时都有这个字段
    // CheckBox isChecked=true时 展示：checkedImage
    renderCheckBox(item) {
        if(this.props.isShowAllCheckbox){//展示全选按钮时
            let userType = global.ECourseConstant.userInfo.loginType;//当前进入的角色
            let disabled='';//置灰的复选框
            if (userType == '1' || userType == '3') {//家长进来
                disabled = item.ISBUY == '1' || item.IS_FREE == '1' ? true : false;// 
            }else{//学生
                disabled = item.ISBUY == '1' || item.IS_FREE == '1' || item.ISENROLL=='1' ? true : false;
            }
            if(!disabled){
                return (
                    <CheckBox
                        disabled={disabled}
                        style={{ flex: 1, paddingTop: 10,paddingLeft:5 }}
                        onClick={() => this.onClick(item)}
                        isChecked={item.isChecked}
                        checkedImage={<Image style={{ width: 16, height: 16,resizeMode:'cover' }} source={disabled ? require('../assets/imgs/disable.png') : require('../assets/imgs/selectActive.png')} />}
                        unCheckedImage={<Image style={{ width: 16, height: 16 ,resizeMode:'cover'}} source={require('../assets/imgs/unselect.png')} />}
                    />);
            }
        }else{
            return null
        }
    }
    // 点击课程目录的 每一项的 勾选按钮 控制底部的全选按钮的状态
    onClick(item) {
        item.isChecked = !item.isChecked;
        let canBuy=[];//所有可以购买的课时
        this.state.LISTCOURSEPART.forEach((item)=>{
            if(typeof item.isChecked!=='undefined'){//有ischeck字段的
                canBuy.push(item)
            }
        })
        if(canBuy.some(item=>item.isChecked==false)){//如果有没有勾选的
            this.props.isAllChecked&&this.props.isAllChecked(false);//父级 取消全选
        }else {
            this.props.isAllChecked&&this.props.isAllChecked(true);//父级 全选
        }
        // 如果 没有选择任何一个课时，让家长报名按钮禁用
        if(canBuy.some(item=>item.isChecked==true)){
            this.props.hasChooseKeShi&&this.props.hasChooseKeShi(true);//父级 不禁用
        }else{
            this.props.hasChooseKeShi&&this.props.hasChooseKeShi(false);//父级 禁用
        }
    }
    // 跳转到课时页面
    goToPeriods(item) {
        let that=this;
        this.props.navigation.navigate('KeShiIndex', {
            id: item.ID,//课时id
            courseId:item.COURSEID,//课程id
            refreshPage: function () {
                //去让父亲组件刷新
                that.props.ResetSearch&&that.props.ResetSearch()
            }
        });
    }
    // ISBUY 0时0 没有购买过，ISBUY 1是已购买，显示去学习的按钮；
    // 当 IS_FREE 0收费 1免费，IS_FREE收费时显示价钱，免费时不显示价钱 显示免费
    FreeOrCharge(item) {
        if(item.IS_FREE=='1'){//如果免费 就显示免费
            return (
                <View style={styles.curriculumPrice}>
                    <Text style={styles.priceText}>免费</Text>
                </View>
            )
        }else{//如果收费 再根据 是否购买了的状态 显示 去学习 或者是 价格
            if (item.ISBUY == '0') {//没有购买 显示价格
                return (
                    <View style={styles.curriculumPrice}>
                        <Text style={styles.pricePrefix}>¥</Text>
                        <Text style={styles.priceText}>{item.MONEY}</Text>
                    </View>
                )
            }else{//购买了 显示去学习
                return (
                    <View style={[styles.curriculumPrice,styles.goStudyRadius]}>
                        <Text style={styles.goStudy}>进入学习</Text>
                    </View>
                )
            }
        }
    }
    // 展示图片
    showPic(FILETYPES) {
        if (FILETYPES && FILETYPES.length) {
            return FILETYPES.map((item, i) => {
                // 文件类型 1视频2音频3图片4ppt 5word 6pdf
                if (item == '1') {
                    return (
                        <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/video.png')} />
                    )
                }
                if (item == '2') {
                    return (
                        <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/audio.png')} />
                    )
                }
                if (item == '3') {
                    return (
                        <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/pic.png')} />
                    )
                }
                if (item == '4') {
                    return (
                        <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/ppt.png')} />
                    )
                }
                if (item == '5') {
                    return (
                        <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/word.png')} />
                    )
                }
                if (item == '6') {
                    return (
                        <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/pdf.png')} />
                    )
                }
            })

        }
    }
}
const styles = StyleSheet.create({
    listBox: {
        backgroundColor: '#fff',
        paddingBottom: setHW(20),
    },
    //    展开
    openBoxText:{
        flexDirection: 'row',
        justifyContent:'flex-end',
        height: setHW(64),
    },
    openBox:{
        // borderWidth:1,
        flexDirection: 'row',
        height: setHW(64),
        justifyContent:'flex-end',
        alignItems:'center',
        width:setHW(160),
    },
    openText:{
        color:'#3977B3',
        fontSize:setSpText(23),
    },
    openImg:{
        width:setHW(14),
        height:setHW(9),
        marginLeft:setHW(10),
        marginRight:setHW(18),
    },
    titleBuyingBox:{
        flexDirection: 'row',
    },
    buying:{
        marginLeft: setHW(16),
        fontSize:setSpText(22),
        color:'red',
        marginTop: Platform.OS === "ios" ?  setHW(4) : 0,
    },
    imgBox:{
        flexDirection: 'row',
        marginLeft: setHW(34),
        marginTop: setHW(8),
    },
    resDetIcon: {
        width: setHW(38),
        height: setHW(38),
        marginTop: setHW(4),
        marginRight: setHW(16),
    },
    // 每一项
    curriculumItem: {
        paddingTop: setHW(20),
        paddingRight: setHW(4),
        flexDirection: 'row',
    },
    // check的宽度
    checkWrapper: {
        marginTop:setHW(4),
        width:setHW(52),
        height:setHW(80),
    },
    // 右侧内容的宽度
    culumItems: {
        width: width -  setHW(100),
        borderWidth: 0.5,
        borderColor: '#EBEBEB',
        paddingTop:  setHW(20),
        borderRadius:  setHW(8)
    },
    // 课时标题
    curriculumTitleWrapper: {
        flexDirection: 'row',
        paddingRight:  setHW(12),
    },
    curriculumTitle: {
        fontSize:setSpText(28),
        paddingLeft:  setHW(20),
        color: '#333'
    },
    // 竖线
    lineBorder: {
        width:  setHW(6),
        height:  setHW(24),
        backgroundColor: '#FF9920',
        position: 'absolute',
        top:  setHW(4),
        left:  setHW(2),
        borderRadius:  setHW(10)
    },
    flexCenter:{
        flexDirection:'row',
        alignItems:'center',
    },
    // 小圆点
    circleBorder: {
        width: setHW(12),
        height: setHW(12),
        marginRight: setHW(20),
        borderRadius: setHW(30),
        backgroundColor: '#FF9920'
    },
    
    curriculumPrice: {
        position: 'absolute',
        right: setHW(20),
        flexDirection: 'row',
        alignItems: 'center',
    },
    pricePrefix: {
        paddingTop:setHW(4),
        fontSize:setSpText(24),
        color: '#FF8A00',
    },
    priceText: {
        fontSize:setSpText(30),
        color: '#FF8A00',
        fontWeight: 'bold'
    },
    knowage: {
         paddingLeft: setHW(80),
    },
    knowageTextWrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingLeft:setHW(32),
    },
    knowageItemRadius:{
        padding: setHW(8),
        height: setHW(40),
        backgroundColor: '#FFF4E8',
        borderRadius:  setHW(8),
        marginRight:  setHW(10),
        marginTop:  setHW(10),
        justifyContent:'center',
        alignItems:'center',
    },
    knowageItem: {
        color: '#FF9920',
        fontSize:setSpText(26),
    },
    // 简介内容
    curCommonText: {
        lineHeight: setHW(44) ,
        color: "#666",
        fontSize:setSpText(28),
    },
    // 简介的内容
    curContent: {
        fontSize:setSpText(26),
        lineHeight: setHW(36),
        paddingLeft: setHW(32),
        paddingRight:setHW(8),
        color: "#999",
    },
    curriculumInfo: {
        paddingLeft: setHW(50),
        marginTop: 5,
        // borderWidth:1,
    },
    // 底部付款tips
    barBottom: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height:  setHW(100),
        flexDirection: 'row',
        backgroundColor: '#fff',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingLeft:  setHW(20)
    },
    checkAllBox: {
        marginTop:  setHW(14),
        alignItems: 'center'
    },
    selectLessons: {
         fontSize:setSpText(28),
        color: '#3977B3'
    },
    priceWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight:  setHW(20)
    },
    selectLessonsWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    priceDiscountText: {
        fontSize:setSpText(28),
        color: '#FF9920',
    },
    priceNumber: {
        flexDirection: 'row'
    },
    numPrifix: {
        paddingTop:  setHW(12),
        color: '#FF9920',
        fontSize: setSpText(24)
    },
    number: {
        fontSize: setSpText(36),
        color: '#FF9920',
        fontWeight: 'bold'
    },
    pricePay: {
        flexDirection: 'row'
    },
    stylepayLessons: {
        width:  setHW(276),
        height:  setHW(100),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FF9920'
    },
    buttonText: {
        color: '#fff',
        fontSize:  setHW(36)
    },
    // 进入学习
    goStudyRadius:{
        height:setHW(44),
        justifyContent:'center',
        alignItems:'center',
        borderRadius: setHW(22),
        paddingLeft: setHW(16),
        paddingRight: setHW(16),
        backgroundColor: '#FF8A00',
    },
    goStudy: {
        fontSize:setSpText(22),
        color: '#fff',
    }
});